<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作节点——修改——修改内容</title>
    <style type="text/css">

    </style>
</head>
<body>

    <div id="container" >
        <input type="text" value="123" id="text">
        <textarea id="textarea">456</textarea>
        <select id="select">
            <option value="one" id="one">1</option>
            <option value="two">2</option>
            <option value="three">3</option>
            <option value="four">4</option>
        </select>
        <span id="other">杂项</span>
    </div>
    <button type="button" onclick="changeContent()">点击我，进行修改内容</button>
<script type="text/javascript">

    let s = "修改内容" ;

    function changeContent() {
        // 修改内容
        // 1、 先获取元素
        // 2、 修改内容

        // 修改 input框中的内容
        let input = document.querySelector("#text") ;
        // 获取值
        // console.log( input ) ;
        // console.log( input.value ) ;

        input.value = "今天西安下雨了";
        // console.log( input.value ) ;

        // 修改 textarea中的值
        let textarea = document.querySelector("#textarea") ;
        // console.log( textarea.value ) ; // 456
        // console.log( textarea.text ) ; // undefined
        // console.log( textarea.innerHTML ) ; // 456

        // 通过上述的输出，是否可以认为 通过 value 或 innerHTML 可以进行修改其 内容 ？

        textarea.innerHTML = s ;

        // 修改 option 中的内容
        let option = document.querySelector("#one") ;
        // innerHTML 和 innerText 都是 在页面上能直接看到的内容
        // value 是 发送到 服务器，可以获取的内容。
        // console.log( option ) ;

        option.value = "first" ;
        option.text = s  ;


        // 修改span 中的内容
        let span = document.querySelector("#other") ;
        // 可以使用 innerHTML 或 innerText 进行 修改内容。
        span.innerText = s  ;
    }

</script>


</body>
</html>